<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
     <script src="js/vue.js"></script>
     <!-- 引入elementui -->
      <!-- 样式 -->
    <link rel="stylesheet" href="element-ui-2.13.0/lib//theme-chalk/index.css">   
       <!-- 组件库 -->
    <script src="element-ui-2.13.0/lib/index.js"></script>    
</head>
<body>
    <div id="app">
        <template>
            <!-- 
                style="width: 100%" 设置表格的宽度
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
                通过姓名进行模糊搜索
                    对表格展示的数组数据进行过滤  tableData.filter
                    data  代表的是数组中的每一个元素
                    !search对用户输入的姓名进行取反  固定式false
                    data.name.toLowerCase().includes(search.toLowerCase()) 
                        断每个对象的name值转成小写是否包含用户输入的条件姓名
            -->
            <el-table
              :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              style="width: 100%">
              <!-- label="Date" 列标题
                prop 绑定数组中对象的属性 
              -->
              <el-table-column
                label="Date"
                prop="date">
              </el-table-column>
              <el-table-column
                label="Name"
                prop="name">
              </el-table-column>
              <el-table-column
                align="right">
                <template slot="header" slot-scope="scope">
                    <!-- v-model双向绑定绑定data中的search变量 -->
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索"/>
                </template>

                <!--
                slot-scope="scope"  作用域插槽  用属性将当前行组件信息赋值给scope
                @click="handleEdit(scope.$index, scope.row)" 点击修改触发handleEdit函数
                            scope.$index  代表索引 从0开始，第一条数据的索引为0
                            scope.row     代表的是当前行的数据
                -->
                <template slot-scope="scope">

                  <el-button
                    size="mini"
                    type="success"
                    @click="handleEdit(scope.$index, scope.row,scope)">修改</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [{
                date: '2016-05-02',
                name: '王小二',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-04',
                name: '王大虎',
                address: '上海市普陀区金沙江路 1517 弄'
                }, {
                date: '2016-05-01',
                name: '李小虎',
                address: '上海市普陀区金沙江路 1519 弄'
                }, {
                date: '2016-05-03',
                name: '张小龙',
                address: '上海市普陀区金沙江路 1516 弄'
                }],
                search: ''
            }
        },
        methods: {
            handleEdit(index, row,scope) {
               
                console.log(scope);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        },
    })
</script>
